<template>
  <div class="page-wide">
     <a-row :gutter="24">
       <a-col :sm="24" :md="12" :xl="15" :style="{ marginBottom: '15px' }">
         <div class="search-container">
          <div class="datetime">
            <a-icon type="calendar" />
            <a-range-picker
              :show-time="{ format: 'HH:mm:ss' }"
              format="YYYY-MM-DD HH:mm:ss"
              :placeholder="['选择开始时间', '选择结束时间']"
              :ranges="datePicker.ranges"
              @change="onChangeDatePicker"
              @ok="onOkDatePicker"
              v-model="datePicker.date"
            >
              <a-icon slot="suffixIcon" type="none" />
            </a-range-picker>
          </div>
          <div class="search">
            <a-button type="primary" @click="handelSubmit"> <a-icon type="search" />检索 </a-button>
          </div>
         </div>
       </a-col>
      <a-col :sm="24" :md="12" :xl="15" :style="{ marginBottom: '15px' }">
        <change-trend></change-trend>
        <change-type></change-type>
      </a-col>
      <a-col :sm="24" :md="12" :xl="9" :style="{ marginBottom: '15px' }">
        <change-source></change-source>
        <risk-statistics></risk-statistics>
        <change-collect></change-collect>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import ChangeTrend from './modules/change/changeTrend'
import ChangeSource from './modules/change/changeSource'
import ChangeType from './modules/change/changeType'
import ChangeCollect from './modules/change/changeCollect'
import RiskStatistics from './modules/change/riskStatistics'
export default {
  name: 'ChangeInfo',
  components: {
    ChangeTrend,
    ChangeSource,
    ChangeCollect,
    ChangeType,
    RiskStatistics
  },
  data () {
    return {
      // 时间
      datePicker: {
        ranges: {
          '15分钟': [moment().subtract(15, 'minute'), moment()],
          '1个小时': [moment().subtract(1, 'hour'), moment()],
          当天: [moment().startOf('day'), moment()],
          '3天前': [moment().subtract(3, 'day'), moment()],
          本周: [moment().subtract(1, 'week'), moment()],
          本月: [moment().startOf('month'), moment()],
          最近3个月: [moment().subtract(3, 'month'), moment()],
          最近半年: [moment().subtract(6, 'month'), moment()]
        },
        // 默认选择7天
        // date: [moment().subtract(7, 'day'), moment()]
        date: [moment().subtract(3, 'month'), moment()]
      }
    }
  },
  created () {
  },
  mounted () {
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
     * change时间
     */
    onChangeDatePicker (value, dateString) {
      console.log('Selected Time: ', value)
      console.log('Formatted Selected Time: ', dateString)
    },

    /**
     * 选择时间
     */
    onOkDatePicker (value) {
      console.log('onOk: ', value)
    },
    /**
     * 检索数据, 数据传递到父节点
     */
    handelSubmit () {
      
    }
  }
}
</script>

<style lang="less" scoped>
 .search-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 14px;
  .datetime {
    margin-right: 8px;
    position: relative;
    .anticon-calendar {
      position: absolute;
      left: 12px;
      top: 50%;
      margin-top: -7px;
      z-index: 999;
    }
    /deep/.ant-calendar-picker-input {
      height: 40px;
      text-align: center;
      border-radius: 2px;
      border: 1px solid #e4e8ee;
    }
  }
  .search {
    button {
      height: 40px;
      width: 110px;
      font-size: 16px;
    }
  }
}
</style>
